<template>
  <div class="box">
    <div class="loading" :style="{ display: 'none' }">
      <div class="loadbox"> <img src="/picture/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
      <div class="quan">
        <span class="iconfont icon-full-screen" @click="quanp" v-show="quan" style="font-size: 22px;"></span>
        <span class="iconfont icon-jiechuquanping" @click="quanp" v-show="!quan" style="font-size: 22px;"></span>
      </div>
      <h1><img src="/images/logo.png">大数据可视化平台</h1>
      <div class="weather"><img src="/picture/weather.png"><span>多云转小雨</span><span>{{ times }}</span></div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: 3.5rem">
            <div class="alltitle">打卡详情</div>
            <div class="sycm">
              <ul class="clearfix">
                <li>
                  <h2>{{ punch.length }}</h2><span>打卡总条数</span>
                </li>
                <li>
                  <h2>{{ punchx.zheng }}</h2><span>正常打卡条数</span>
                </li>
                <li>
                  <h2>{{ punchx.chi }}</h2><span>迟到打卡条数</span>
                </li>
              </ul>
              <div style="border-bottom: 1px solid rgba(255,255,255,.1);margin: 20px 0;"></div>
              <ul class="clearfix">
                <li>
                  <h2>{{ punchx.kaung }}</h2><span>旷工打卡条数</span>
                </li>
                <li>
                  <h2>{{ punchx.shi }}</h2><span>事假打卡条数</span>
                </li>
                <li>
                  <h2>{{ punchx.bin }}</h2><span>病假打卡条数</span>
                </li>
              </ul>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3.7rem">
            <div class="alltitle">工资占比</div>
            <div class="centent">
              <!-- 总应发工资 -->
              <echart class="sy" id="echarts1" :option="option1" />
              <!-- 总工资 -->
              <echart class="sy" id="echarts2" :option="option2" />
              <!-- 迟到扣除的工资 -->
              <echart class="sy" id="echarts3" :option="option3" />
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3.7rem">
            <!-- 部门及人数 -->
            <div class="alltitle">部门及人数</div>
            <echart id="echarts4" :option="option4" />
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter">{{ money3 }}</li>
                <li class="pulll_left counter">{{ money2 }}</li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left" style="color:white">应发工资总数</li>
                <li class="pulll_left" style="color:white">扣除工资总数</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="map1"><img src="/picture/lbx.png"></div>
            <div class="map2"><img src="/picture/jt.png"></div>
            <div class="map3"><img src="/picture/map.png"></div>
            <div class="map4" id="map_1"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height:6.5rem">
            <div class="alltitle">公司员工信息</div>
            <div class="tabs">
            </div>
            <div class="clearfix">
              <echart class="sy" id="echarts6" :option="option6" />
              <echart class="sy" id="echarts7" :option="option7" />
              <echart class="sy" id="echarts8" :option="option8" />
            </div>
            <div class="addnew">
              <div class="tit02"><span>员工人数总表</span></div>
              <div class="adduser">
                <ul class="clearfix" :style="{ top: topX + 'rem' }">
                  <li class="clearfix" v-for="item in users" :key="item">
                    <span class="pulll_left"><img src="/picture/head.jpg">{{ item.nickname }}</span>
                    <span class="pulll_right">{{ item.department }} - {{ item.sex }} - {{ item.position }}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 4.7rem">
            <div class="alltitle">消息公告</div>
            <div class="wrap">
              <ul :style="{ top: topX1 + 'rem' }">
                <li v-for="item in meg" :key="item" :title="item.content">
                  <p>{{ item.nickname }} - {{ item.type }} - {{ item.content }}</p>
                </li>
              </ul>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="back"></div>
    <local v-show="boblocal" />
  </div>
</template>


<script setup>
import local from '@/components/local.vue'
import * as echarts from 'echarts';
import echart from "../../components/eachart.vue"
import { onBeforeUnmount, onUnmounted, reactive, ref, watch } from 'vue';
import mitter from '../../utils/mitter'
import { initWebSocket, sendSock } from '../../utils/websocket'

// 加载状态
let boblocal = ref(true)

//全屏状态
let quan = ref(true)
//全屏
let quanp = () => {
  if (quan.value) {
    if (document.exitFullscreen) {

      document.documentElement.requestFullscreen();

    } else if (document.webkitExitFullscreen) {
      /* Safari */
      document.documentElement.webkitRequestFullscreen();

    } else if (document.msExitFullscreen) {
      /* IE11 */
      document.documentElement.msRequestFullscreen();

    } else if (document.webkitExitFullscreen) {
      /* Edge */
      document.documentElement.webkitEnterFullscreen();

    }
    mitter.emit('sidebob', false)
    quan.value = false
  } else {
    mitter.emit('sidebob', true)
    quan.value = true
    if (document.exitFullscreen) {

      document.exitFullscreen();

    } else if (document.mozCancelFullScreen) {
      /* Firefox */
      document.mozCancelFullScreen();

    } else if (document.webkitExitFullscreen) {
      /* Safari */
      document.webkitExitFullscreen();

    } else if (document.msExitFullscreen) {
      /* IE11 */
      document.msExitFullscreen();

    }
  }

}


// 消息公告
let meg = ref([])
// 打卡信息
let punch = ref([])
let punchx = ref({
  zheng: 0,
  chi: 0,
  kaung: 0,
  shi: 0,
  bin: 0
})

//option1
let money1 = ref(0)//实际发放工资
let money2 = ref(0)//迟到扣除工资
let money3 = money1.value + money2.value//总工资
let option1 = ref({
  //animation: false,
  series: [{
    type: 'pie',
    radius: ['70%', '80%'],
    color: '#0088cc',
    label: {
      normal: {
        position: 'center'
      }
    },
    data: [{
      value: money3,
      name: '总工资',
      label: {
        normal: {
          formatter: money3 + '元',
          textStyle: {
            fontSize: 12,
            color: 'white',
          }
        }
      }
    },
    ]
  }]
})
//option2
let option2 = ref({
  series: [{
    type: 'pie',
    radius: ['70%', '80%'],
    color: '#fccb00',
    label: {
      normal: {
        position: 'center'
      }
    },
    data: [{
      value: money1.value,
      name: '实际发放工资',
      label: {
        normal: {
          formatter: money1.value + '元',
          textStyle: {
            fontSize: 12,
            color: '#fff',
          }
        }
      }
    }, {
      value: money2.value,
      name: '迟到扣除工资',
      label: {
        normal: {
          formatter: money2.value + '元',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,.2)'
        },
        emphasis: {
          color: '#fff'
        }
      },
    }]
  }]
})
//option3
let option3 = ref({
  series: [{
    type: 'pie',
    radius: ['70%', '80%'],
    color: '#62b62f',
    label: {
      normal: {
        position: 'center'
      }
    },
    data: [{
      value: money2.value,
      name: '迟到扣除工资',
      label: {
        normal: {
          formatter: money2.value + '元',
          textStyle: {
            fontSize: 12,
            color: '#fff',
          }
        }
      }
    }, {
      value: money1.value,
      name: '实际发放工资',
      label: {
        normal: {
          formatter: money1.value + '元',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,.2)'
        },
        emphasis: {
          color: '#fff'
        }
      },
    }]
  }]
})
//option4
let plantCap = reactive([{
  name: '技术部',
  value: '3'
},
{
  name: '人事部',
  value: '3'
}
]);
let datalist = reactive([{
  offset: [56, 48],
  symbolSize: 110,
  // opacity: .95,
  color: 'rgba(73,188,247,.14)',

}, {

  offset: [30, 70],
  symbolSize: 70,
  color: 'rgba(73,188,247,.14)'
}, {
  offset: [0, 43],
  symbolSize: 60,
  color: 'rgba(73,188,247,.14)'

}, {
  offset: [93, 30],
  symbolSize: 70,
  color: 'rgba(73,188,247,.14)'
}, {
  offset: [26, 19],
  symbolSize: 65,
  color: 'rgba(73,188,247,.14)'
}, {
  offset: [75, 75],
  symbolSize: 60,
  color: 'rgba(73,188,247,.14)'

}]);
let datas = reactive([]);
for (let i = 0; i < plantCap.length; i++) {
  let item = plantCap[i];
  let itemToStyle = datalist[i];
  datas.push({
    name: item.value + '\n' + item.name,
    value: itemToStyle.offset,
    symbolSize: itemToStyle.symbolSize,
    label: {
      normal: {
        textStyle: {
          fontSize: 14
        }
      }
    },

    itemStyle: {
      normal: {
        color: itemToStyle.color,
        opacity: itemToStyle.opacity
      }
    },
  })
}
let option4 = reactive({
  grid: {
    show: false,
    top: 10,
    bottom: 10
  },

  xAxis: [{
    gridIndex: 0,
    type: 'value',
    show: false,
    min: 0,
    max: 100,
    nameLocation: 'middle',
    nameGap: 5
  }],

  yAxis: [{
    gridIndex: 0,
    min: 0,
    show: false,
    max: 100,
    nameLocation: 'middle',
    nameGap: 30
  }],
  series: [{
    type: 'scatter',
    symbol: 'circle',
    symbolSize: 120,
    label: {
      normal: {
        show: true,
        formatter: '{b}',
        color: '#FFF',
        textStyle: {
          fontSize: '30'
        }
      },
    },
    itemStyle: {
      normal: {
        color: '#F30'
      }
    },
    data: datas
  }]

})
//option6
let money6 = ref(0)
let money7 = ref(0)
let money8 = money6.value + money7.value
let option6 = ref({
  //animation: false,
  series: [{
    type: 'pie',
    radius: ['70%', '80%'],
    color: '#0088cc',
    label: {
      normal: {
        position: 'center'
      }
    },
    data: [{
      value: money8,
      name: '员工总数',
      label: {
        normal: {
          formatter: money8 + '人',
          textStyle: {
            fontSize: 12,
            color: 'white',
          }
        }
      }
    },
    ]
  }]
})
//option7
let option7 = ref({
  series: [{
    type: 'pie',
    radius: ['70%', '80%'],
    color: '#fccb00',
    label: {
      normal: {
        position: 'center'
      }
    },
    data: [{
      value: money6.value,
      name: '已入职员工人数',
      label: {
        normal: {
          formatter: money6.value + '人',
          textStyle: {
            fontSize: 12,
            color: '#fff',
          }
        }
      }
    }, {
      value: money7.value,
      name: '今日入职人数',
      label: {
        normal: {
          formatter: money7.value + '人',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,.2)'
        },
        emphasis: {
          color: '#fff'
        }
      },
    }]
  }]
})
//option8
let option8 = ref({
  series: [{
    type: 'pie',
    radius: ['70%', '80%'],
    color: '#62b62f',
    label: {
      normal: {
        position: 'center'
      }
    },
    data: [{
      value: money7.value,
      name: '今日入职人数',
      label: {
        normal: {
          formatter: money7.value + '人',
          textStyle: {
            fontSize: 12,
            color: '#fff',
          }
        }
      }
    }, {
      value: money6,
      name: '已入职员工人数',
      label: {
        normal: {
          formatter: money6 + '人',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,.2)'
        },
        emphasis: {
          color: '#fff'
        }
      },
    }]
  }]
})

//员工信息
let users = ref([])
// 工资
initWebSocket()
sendSock({
  echarts: 'option',
}, data => {
  money1.value = 0//实际发放工资
  money2.value = 0//迟到扣除工资
  money3 = money1.value + money2.value//总工资
  data.salary.forEach(item => {
    money1.value += Number(item.total)
    money2.value += Number(item.late_early_times) * 200
  });
  money3 = money1.value + money2.value
  option1.value.series[0].data[0].value = money3
  option1.value.series[0].data[0].label.normal.formatter = money3 + '元'

  option2.value.series[0].data[0].value = money1.value
  option2.value.series[0].data[0].label.normal.formatter = money1.value + '元'
  option2.value.series[0].data[1].value = money2.value
  option2.value.series[0].data[1].label.normal.formatter = money2.value + '元'

  option3.value.series[0].data[0].value = money2
  option3.value.series[0].data[0].label.normal.formatter = money2 + '元'
  option3.value.series[0].data[1].value = money1.value
  option3.value.series[0].data[1].label.normal.formatter = money2.value + '元'


  // 员工总人数
  money6.value = 0//已入职
  money7.value = 0//新入职
  money8 = money6.value + money7.value//总人数
  let times = new Date().toLocaleString().split(' ')[0]
  let tiems1 = null
  data.user.forEach(item => {
    if (item.created_at && typeof item.created_at === 'string') {
      tiems1 = item.created_at.split(' ')[0]
    }
    if (times == tiems1) {
      money7.value += 1
    } else {
      money6.value += 1
    }
  });
  users.value = data.user
  meg.value = data.message
  punch.value = data.punch
  punchx.value = {
    zheng: 0,
    chi: 0,
    kaung: 0,
    shi: 0,
    bin: 0
  }
  punch.value.forEach(item => {
    if (item.attendance_type == '正常') {
      punchx.value.zheng += 1
    } else if (item.attendance_type == '旷工') {
      punchx.value.kaung += 1
    }
    else if (item.attendance_type == '事假') {
      punchx.value.shi += 1
    }
    else if (item.attendance_type == '病假') {
      punchx.value.bin += 1
    }
    else if (item.attendance_type == '迟到') {
      punchx.value.chi += 1
    }
  });

  money8 = money6.value + money7.value
  option6.value.series[0].data[0].value = money8
  option6.value.series[0].data[0].label.normal.formatter = money8 + '人'

  option7.value.series[0].data[0].value = money6.value
  option7.value.series[0].data[0].label.normal.formatter = money6.value + '人'
  option7.value.series[0].data[1].value = money7.value
  option7.value.series[0].data[1].label.normal.formatter = money6.value + '人'

  option8.value.series[0].data[0].value = money7.value
  option8.value.series[0].data[0].label.normal.formatter = money7.value + '人'
  option8.value.series[0].data[1].value = money6.value
  option8.value.series[0].data[1].label.normal.formatter = money7.value + '人'
  // 加载完毕
  boblocal.value = false
})







let date = new Date().toLocaleString()
let times = ref(date)
let times1 = setInterval(() => {
  times.value = new Date().toLocaleString()
}, 1000)


//员工滚动动画
let topX = ref(0)
let times2 = setInterval(() => {
  if (topX.value <= -0.35 * users.value.length) {
    topX.value = 0
  }
  topX.value += -0.002
}, 1)

//消息滚动动画
let topX1 = ref(0)
let times3 = setInterval(() => {
  if (topX1.value <= -0.3 * meg.value.length) {
    topX1.value = 0
  }
  topX1.value += -0.002
}, 1)

onBeforeUnmount(() => {
  clearInterval(times1)
  clearInterval(times2)
  clearInterval(times3)
})



</script>

<style scoped lang="less">
@charset "utf-8";

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 隐藏浏览器默认的滚动条 */
  overflow: hidden;
  /* 显示自定义滚动条 */
  overflow-y: auto;

  &::-webkit-scrollbar {
    /* 设置滚动条宽度和高度 */
    width: 0px;
    height: 0px;
  }

  &::-webkit-scrollbar-thumb {
    /* 设置滚动条拖动条颜色和圆角 */
    background-color: #cfcfcf;
    border-radius: 5px;

    /* 设置拖动条在hover状态下的样式 */
    &:hover {
      background-color: #aaa;
    }
  }

  &::-webkit-scrollbar-track {
    /* 设置滚动条轨道颜色和圆角 */
    background-color: #eee;
    border-radius: 5px;
  }

  /* 其他浏览器 */
  & {
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf #eee;
  }

  &::-webkit-scrollbar-track {
    background-color: #eee;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cfcfcf;
    border-radius: 5px;

    &:active {
      background-color: #999;
    }
  }

}

*,
.box {
  padding: 0px;
  margin: 0px;
  color: #222;
  font-family: "微软雅黑";

}

.box {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000d4a url(/images/bg.jpg) center top;
  background-size: cover;
  color: #666;
  font-size: .1rem;

}

li {
  list-style-type: none;
}


i {
  margin: 0px;
  padding: 0px;
  text-indent: 0px;
}

img {
  border: none;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: #399bff;
}

a.active,
a:focus {
  outline: none !important;
  text-decoration: none;
}

ol,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0
}

a:hover {
  color: #06c;
  text-decoration: none !important
}


.clearfix:after,
.clearfix:before {
  display: table;
  content: " "
}

.clearfix:after {
  clear: both
}

.pulll_left {
  float: left;
}

.pulll_right {
  float: right;
}


/***/

.loading {
  position: fixed;
  left: 0;
  top: 0;
  font-size: .3rem;
  z-index: 100000000;
  width: 100%;
  height: 100%;
  background: #1a1a1c;
  text-align: center;
}

.loadbox {
  position: absolute;
  width: 160px;
  height: 150px;
  color: #324e93;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -75px;
}

.loadbox img {
  margin: 10px auto;
  display: block;
  width: 40px;
}

.copyright {
  background: rgba(19, 31, 64, .32);
  border: 1px solid rgba(255, 255, 255, .05);
  line-height: .5rem;
  text-align: center;
  padding-right: 15px;
  bottom: 0;
  color: rgba(255, 255, 255, .7);
  font-size: .16rem;
}

.head {
  height: 8%;
  background: url(/images/head_bg.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative;

  .quan {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-90%);

    span {
      color: rgba(0, 242, 255, 0.6);
      font-size: 30px;
    }
  }
}

.head h1 {
  color: #fff;
  text-align: center;
  font-size: .42rem;
  line-height: .75rem;
  padding-bottom: 5px;
}

.head h1 img {
  display: inline-block;
  width: 1rem;
  height: 0.5rem;
  vertical-align: middle;
  margin-right: .2rem;
  border-radius: 10px;
  opacity: 0.9;

}

.weather {
  position: absolute;
  right: .3rem;
  top: 0;
  line-height: .75rem;
}

.weather img {
  width: .37rem;
  display: inline-block;
  vertical-align: middle;
}

.weather span {
  color: rgba(255, 255, 255, .7);
  font-size: .18rem;
  padding-right: .1rem;
}

.mainbox {
  padding: .4rem .4rem 0rem .4rem;
}

.mainbox>ul {
  margin-left: -.4rem;
  margin-right: -.4rem;
}

.mainbox>ul>li {
  float: left;
  padding: 0 .4rem
}

.mainbox>ul>li {
  width: 30%
}

.mainbox>ul>li:nth-child(2) {
  width: 40%
}

.boxall {
  border: 1px solid rgba(25, 186, 139, .17);
  padding: 0 .3rem .3rem .3rem;
  background: rgba(255, 255, 255, .04) url(/images/line.png);
  background-size: 100% auto;
  position: relative;
  margin-bottom: .3rem;
  z-index: 10;
}

.boxall:before,
.boxall:after {
  position: absolute;
  width: .1rem;
  height: .1rem;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.boxall:before,
.boxfoot:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}

.boxall:after,
.boxfoot:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}

.alltitle {
  font-size: .24rem;
  color: #fff;
  text-align: center;
  line-height: .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.boxfoot {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.boxfoot:before,
.boxfoot:after {
  position: absolute;
  width: .1rem;
  height: .1rem;
  content: "";
  border-bottom: 2px solid #02a6b5;
  bottom: 0;
}

.bar {
  background: rgba(101, 132, 226, .1);
  padding: .15rem;
}

.barbox li,
.barbox2 li {
  width: 50%;
  text-align: center;
  position: relative;
}

.barbox:before,
.barbox:after {
  position: absolute;
  width: .3rem;
  height: .1rem;
  content: "";
}

.barbox:before {
  border-left: 2px solid #02a6b5;
  left: 0;
  border-top: 2px solid #02a6b5;
}

.barbox:after {
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
  border-bottom: 2px solid #02a6b5;
}

.barbox li:first-child:before {
  position: absolute;
  content: "";
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, .2);
  right: 0;
  top: 25%;
}

.barbox {
  border: 1px solid rgba(25, 186, 139, .17);
  position: relative;
}

.barbox li {
  font-size: .6rem;
  color: #ffeb7b;
  padding: .05rem 0;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-weight: bold;
}

.barbox2 li {
  font-size: .19rem;
  color: #637c9f;
  padding-top: .1rem;
}

.map {
  position: relative;
  height: 7.2rem;
  z-index: 9;
  margin-left: 5%
}

.map4 {
  width: 200%;
  height: 7rem;
  position: relative;
  left: -50%;
  top: 4%;
  margin-top: .2rem;
  z-index: 5;
}

.map1,
.map2,
.map3 {
  position: absolute;
}

.map1 {
  width: 6.43rem;
  z-index: 2;
  top: .45rem;
  left: .4rem;
  animation: myfirst2 15s infinite linear;
}

.map2 {
  width: 5.66rem;
  top: .85rem;
  left: .77rem;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}

.map3 {
  width: 5.18rem;
  top: 1.07rem;
  left: 1.13rem;
  z-index: 1;
}

#echarts1,
#echarts2,
#echarts3,
#echarts6,
#echarts7,
#echarts8 {
  position: relative;
}

#echarts1:before,
#echarts2:before,
#echarts3:before,
#echarts6:before,
#echarts7:before,
#echarts8:before {
  position: absolute;
  content: "23124";
  width: 100%;
  text-align: center;
  bottom: .15rem;
  color: #fff;
  opacity: .7;
  font-size: .18rem;
}

#echarts1:before {
  content: "应发总工资"
}

#echarts2:before {
  content: "实际发放工资"
}

#echarts3:before {
  content: "迟到扣除工资"
}

#echarts6:before {
  content: "员工总数"
}

#echarts7:before {
  content: "已入职员工人数"
}

#echarts8:before {
  content: "今日入职人数"
}


.tabs {
  text-align: center;
  padding: .1rem 0 0 0;
}

.tabs a {
  position: relative;
  display: inline-block;
  margin-left: 1px;
  padding: .05rem .2rem;
  color: #898989;
  transition: all .3s ease-out 0s;
  font-size: 14px;
}

.tabs li {
  display: inline-block;
}

.tabs a:after {
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: rgba(255, 255, 255, .1);
  content: '';
  margin-left: 0;
  right: -1px;
  margin-top: 7px;


}

.tabs li a.active {
  border: 1px solid rgba(25, 186, 139, .17);
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.tit02 {
  text-align: center;
  margin: .1rem 0;
  position: relative
}

.tit02 span {
  border: 1px solid rgba(25, 186, 139, .17);
  letter-spacing: 2px;
  padding: .01rem .2rem;
  background: rgba(255, 255, 255, .05);
  font-size: .18rem;
  color: #49bcf7;
}

.tit02:before,
.tit02:after {
  position: absolute;
  width: 26%;
  height: 1px;
  background: rgba(25, 186, 139, .2);
  content: "";
  top: .12rem;
}

.tit02:after {
  right: 0;
}

.tit02:before {
  left: 0;
}

.wrap {
  height: 3.1rem;
  overflow: hidden;

  ul {
    position: relative;
  }
}

.wrap li {
  line-height: .42rem;
  height: .42rem;
  font-size: .18rem;
  text-indent: .24rem;
  margin-bottom: .1rem;
}

.wrap li p {
  border: 1px solid rgba(25, 186, 139, .17);
  color: rgba(255, 255, 255, .6);
}

.sy {
  float: left;
  width: 33%;
  height: 2.2rem;
  margin-top: -.25rem;
}


.adduser {
  height: 2.5rem;
  overflow: hidden;

  ul {
    position: relative;
    // transition: all 0.4s linear;
  }
}

.adduser li {
  height: .5rem;
}

.adduser img {
  width: .40rem;
  border-radius: .5rem;
  margin-right: .1rem;
  display: inline-block;
  vertical-align: middle;
}

.adduser span {
  line-height: .5rem;
  font-size: .18rem;
  color: rgba(255, 255, 255, .6);
}

.sycm ul {
  margin-left: -.5rem;
  margin-right: -.5rem;
  padding: .16rem 0;
}

.sycm li {
  float: left;
  width: 33.33%;
  text-align: center;
  position: relative
}

.sycm li:before {
  position: absolute;
  content: "";
  height: 30%;
  width: 1px;
  background: rgba(255, 255, 255, .1);
  right: 0;
  top: 15%;
}

.sycm li:last-child:before {
  width: 0;
}

.sycm li h2 {
  font-size: .3rem;
  color: #c5ccff;
}

.sycm li span {
  display: block;
  font-size: .18rem;
  padding-top: 5px;
  color: #fff;
  opacity: .5;
}

@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-359deg);
  }
}
</style>